<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate");
    response.setHeader("Pragma", "no-cache");
    response.setDateHeader("Expires", 0);
%>
<!DOCTYPE html>
<html>
<head>
    <title>用户注册</title>
    <script>
        function validateForm() {
            const role = document.getElementById("role").value;

            // 检查角色是否已选择
            if (!role) {
                alert("请选择角色类型");
                return false;
            }

            // 根据角色验证专属字段
            let isValid = true;
            if (role === 'student') {
                isValid = validateStudentFields();
            } else if (role === 'teacher') {
                isValid = validateTeacherFields();
            }

            // 阻止表单提交如果验证失败
            if (!isValid) {
                return false;
            }

            // 如果通过验证，允许提交
            return true;
        }

        function validateStudentFields() {
            const studentId = document.getElementsByName("studentId")[0].value;
            const className = document.getElementsByName("className")[0].value;
            const major = document.getElementsByName("major")[0].value;

            if (!studentId || !className || !major) {
                alert("请填写完整的学生信息");
                return false;
            }
            return true;
        }

        function validateTeacherFields() {
            const teacherId = document.getElementsByName("teacherId")[0].value;
            const teacherName = document.getElementsByName("teacherName")[0].value;

            if (!teacherId || !teacherName) {
                alert("请填写完整的教师信息");
                return false;
            }
            return true;
        }

        function initRoleValidation() {
            const role = document.getElementById("role").value;
            toggleRequired('studentFields', role === 'student');
            toggleRequired('teacherFields', role === 'teacher');
        }


        function showRoleFields() {
            const role = document.getElementById("role").value;
            // 切换显示/隐藏
            document.getElementById("studentFields").style.display = role === 'student' ? 'block' : 'none';
            document.getElementById("teacherFields").style.display = role === 'teacher' ? 'block' : 'none';
            // 动态更新必填属性
            toggleRequired('studentFields', role === 'student');
            toggleRequired('teacherFields', role === 'teacher');
        }

        function toggleRequired(fieldId, isRequired) {
            const fields = document.getElementById(fieldId).querySelectorAll('input');
            fields.forEach(input => {
                input.required = isRequired; // 仅保留必填属性设置

            });
        }


        window.onload = function () {
            initRoleValidation();
            showRoleFields(); // 初始化时执行一次
        };
            // 初始化主题
            function initTheme() {
            const savedTheme = localStorage.getItem('theme') || 'dark';
            const isLight = savedTheme === 'light';
            document.body.classList.toggle('light-mode', isLight);
            document.querySelector('.theme-toggle').textContent = isLight ? '☀️' : '🌙';
        }

            // 切换主题
            function toggleTheme() {
            const body = document.body;
            const isLight = !body.classList.contains('light-mode');
            body.classList.toggle('light-mode');
            localStorage.setItem('theme', isLight ? 'light' : 'dark');
            document.querySelector('.theme-toggle').textContent = isLight ? '☀️' : '🌙';
        }

            // 页面加载时初始化
            window.addEventListener('load', initTheme);
    </script>
</head>
<body>
<h2>用户注册</h2>
<!-- 主题切换按钮 -->
<button onclick="toggleTheme()" class="theme-toggle" style="
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 10px 15px;
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
">
    🌙/☀️
</button>
<%-- 错误提示 --%>
<c:if test="${not empty sessionScope.errorMessage}">
    <div class="error-message">
            ${sessionScope.errorMessage}
    </div>
    <c:remove var="errorMessage" scope="session"/>
</c:if>
<div style="text-align: center; margin-top: 1.5rem;">
    <a href="rDBLogin.jsp" style="color: #c5a47e; text-decoration: none;">
        ← 返回登录
    </a>
</div>
<form action="register" method="post" onsubmit="return validateForm()">
    <div class="form-grid">
        <!-- 第一列 -->
        <div>
            <label>角色类型：
                <select id="role" name="role" onchange="showRoleFields()" required>
                    <option value="">请选择角色</option>
                    <option value="student">学生</option>
                    <option value="teacher">教师</option>
                </select>
            </label>
            <label>姓名：<input type="text" name="name" required></label>
            <label>密码：<input type="password" name="password" required></label>
        </div>

        <!-- 第二列 -->
        <div>
            <label>性别：<input type="text" name="gender" required></label>
            <label>年龄：<input type="number" name="age" required></label>
            <label>电话：<input type="tel" name="phone" required></label>
        </div>
    </div>

    <div id="studentFields">
        <label>
            <span class="label-text">学号：</span>
            <input type="text" name="studentId">
        </label>
        <label>
            <span class="label-text">班级：</span>
            <input type="text" name="className">
        </label>
        <label>
            <span class="label-text">专业：</span>
            <input type="text" name="major">
        </label>
    </div>

    <!-- 教师专属字段 -->
    <div id="teacherFields" style="display:none">
        <label>
            <span class="label-text">教师ID：</span>
            <input type="text" name="teacherId">
        </label>
    </div>

    <input type="submit" value="注册">
</form>
</body>
</html>
<link href="./css/rDBRegister.css" rel="stylesheet" />
